let user = JSON.parse(localStorage.getItem("user"));
let userId = user.userId;
localStorage.setItem("token", user.token);
console.log(userId);
let notebooks = document.querySelector(".notebooks");
let diarys = document.querySelector(".diarys");
let diary = document.querySelector(".diary");
let sidebar = document.querySelector(".sidebar");
let header = document.querySelector(".header");
let btn = document.querySelector(".btn");
let firstId = "";
let firstName = "";
let userName = "";
async function getNotebooks() {
  let res1 = await axios({
    method: "GET",
    url: "/api/user",
    params: {
      userId: userId,
    },
  });
  userName = res1.data.data.username;
  // 发请求
  let res = await axios({
    method: "GET",
    url: "/api/diarybook",
    params: {
      authorId: "6323245f7542a3c04fc72c51",
    },
  });
  let notebooksLists = res.data.data.diarybooks;
  console.log(notebooksLists);
  let htmlA = "";
  let html = `  <div class="btn">
                    <h2 class="page-header">${userName}的日记本</h2>
                    <a class="cov" href="../fy/text _diary.html">
                        <button class="creat-diary">+创建日记本</button>
                    </a>
                    
                </div>`;
  for (const notebooksList of notebooksLists) {
    console.log(notebooksList);
    let beginTime = notebooksList.createAt.replace(/[a-zA-Z]+/g, "");
    let overTime = notebooksList.overduetime.replace(/[a-zA-Z]+/g, "");
    htmlA += `
                <div class="notebook" data-lookDiaryItemId = "">
                    <a class="cov" href="../dc/diarya.html">
                        <img class="cover" src="http://localhost:8000${notebooksList.coverPhoto}" alt="梦魇">
                        <div class="icon">
                        </div>
                    </a>
                    <h3>
                        <a href="">${notebooksList.title} </a>
                    </h3>
                    <p>${beginTime} 创建<br>${overTime} 过期</p>
                </div>
          `;
  }

  btn.innerHTML = html;
  notebooks.innerHTML = htmlA;
  firstId = notebooksLists[0]._id;
  // console.log(firstId);
  firstName = notebooksLists[0].title;
  getTime();
  getNotebook();
}
getNotebooks();

async function getNotebook() {
  // 发请求
  let res = await axios({
    method: "GET",
    url: "/api/diaryItem",
    params: {
      diarybookId: firstId,
    },
  });
  // console.log(res);
  let notebookLists = res.data.data;
  // console.log(notebookLists);
  let htmlB = "";
  let htmlA = `  <h1 class="page-header">${userName}的日记</h1>
                <div>
                    <input type="text">
                    <button>搜索</button>
                </div>`;
  for (const notebookList of notebookLists) {
    let beginTime = notebookList.createAt.slice(11, 19);
    let firstTime = beginTime.slice(0, 2);
    let amPm = "";
    if (firstTime < 12) {
      amPm = "am";
    } else {
      amPm = "pm";
    }
    console.log(firstTime);
    htmlB += `
                    <div class="diary">
                        <div class="item">
                            <div class="time">
                                ${beginTime} ${amPm}
                                <a class="book" href="">${firstName}</a>
                            </div>
                            <pre class="content">${notebookList.content}</pre>
                            <div class="reply">
                                <a href="../ys/reply.html">回复</a>
                            </div>
                        </div>
                    </div>
              `;
    diary.innerHTML = htmlB;
    header.innerHTML = htmlA;
  }
}

async function getTime() {
  let res1 = await axios({
    method: "GET",
    url: "/api/user",
    params: {
      userId: "6323245f7542a3c04fc72c51",
    },
  });
  let date = new Date();
  // 获取日期：年月日
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  this.nowDate = month + "/" + day;
  this.nowYear = "/" + year;

  // 获取星期几
  const weeks = new Array(
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  );
  this.nowWeek = weeks[new Date().getDay()];
  nowWeek = this.nowWeek;
  nowDate = this.nowDate;
  nowYear = this.nowYear;
  // console.log(nowWeek, nowDate, nowYear);

  console.log(res1);
  userName = res1.data.data.username;
  let imgSrc = res1.data.data.headphoto;
  let beginTime = res1.data.data.createAt
    .replace(/[a-zA-Z]+/g, "")
    .slice(0, 10);
  let description = res1.data.data.description;
  console.log(userName);
  let html = ``;
  html = `
            <div class = "title-date" >
                ${nowDate}<span>${nowYear}</span >
                <b>${nowWeek}</b> 
            </div>
            <h2 class="user-name">
                <a href="">${userName} </a>
            </h2>
            <a href="">
                <img class="icon" src="http://localhost:8000${imgSrc}" alt="">
            </a>
            <p>${beginTime} 加入</p>
            <p>${description}</p>
            <button class="focus">关注此人</button>
        `;
  sidebar.innerHTML = html;
}

sidebar.addEventListener("click", add);

async function add(e) {
  if (!e.target.matches(".focus")) return;
  let res1 = await axios({
    method: "GET",
    url: "/api/user",
    params: {
      userId: "6323245f7542a3c04fc72c51",
    },
  });
  let res = await axios({
    method: "post",
    url: "/api/user/focus",
    data: {
      userId: "632197bd8c0fd333f646d17c",
      idolId: "6323245f7542a3c04fc72c51",
    },
  });
  userName = res1.data.data.username;
  let imgSrc = res1.data.data.headphoto;
  let beginTime = res1.data.data.createAt
    .replace(/[a-zA-Z]+/g, "")
    .slice(0, 10);
  let description = res1.data.data.description;
  let html = ``;
  html = `
            <div class = "title-date" >
                ${nowDate}<span>${nowYear}</span >
                <b>${nowWeek}</b> 
            </div>
            <h2 class="user-name">
                <a href="">${userName} </a>
            </h2>
            <a href="">
                <img class="icon" src="http://localhost:8000${imgSrc}" alt="">
            </a>
            <p>${beginTime} 加入</p>
            <p>${description}</p>
            <button class="active">取消关注</button>
        `;
  sidebar.innerHTML = html;
}
